<template>
	<div>
    <Breadcrumb :style="{margin: '15px 0',float: 'left'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>店铺管理</BreadcrumbItem>
      <BreadcrumbItem>员工管理</BreadcrumbItem>
    </Breadcrumb>
    <ButtonGroup :style="{ margin: '15px 0', float: 'right' }">
      <Button @click="addEmployee" type="warning">邀请</Button>
    </ButtonGroup>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 400px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>
    </Content>
    <Modal :footer-hide="true" v-model="showRoleAuth" title="员工授权" width="70%" @on-cancel="onCancel">
      <Authorize ref="refAuthorize" :dataBus="dataVo" :callbank="callEvent" :key="keyIndex"></Authorize>
    </Modal>
    <Modal :footer-hide="true" v-model="showUserSelection" title="选择用户" width="70%" @on-cancel="onCancel">
      <UserSelection :callbank="callEmployee" :key="keyIndex"></UserSelection>
    </Modal>
  </div>  
</template>
<script scope>
import Authorize from './authorize.vue'
import UserSelection from '../member/selection.vue'
export default {
  data () {
    return {
      pageTotal: 0,
      keyIndex: 0,
      dataGrid:[],
      postRoleArray: [],
      keywords: null,
      showRoleAuth: false,
      showUserSelection: false,
      dataVo: {},
      query: {
        pageIndex: 1,
        pageSize: 15,
        equal: {
          shopId: this.$store.getShop('shopId')
        }
      },
      columns: [
        {
          title: "用户姓名",
          key: "userName",
          width: 200
        },
        {
          title: "手机号",
          key: "userMobile",
          width: 180
        },
        {
          title: "员工岗位",
          key: "userPost",
          width: 180
        },
        {
          title: "授权码",
          key: "authCode"
        },
        {
          title: "注册时间",
          key: "postTime",
          width: 180,
          render: (h, params) => {
            return h("div", this.$date(params.row.postTime,'yyyy-MM-dd HH:mm'));
          },
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.auth(params.row)}}},"授权"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.doDelete(params.row)}},props:{divided:true}},"删除")
                  ]
                ),
              ]
            )
          }
        },
      ]
    }
  },
  components: {
    Authorize,
    UserSelection
  },
  methods: {
    //授权
    auth(e) {
      this.dataVo = e
      this.$refs.refAuthorize.Init()
      this.showRoleAuth = true
    },
    //添加员工
    addEmployee() {
      this.showUserSelection = true
    },
    callEvent() {
      this.showRoleAuth = false
      this.keyIndex ++
      this.Init()
    },
    callEmployee(user) {
      this.showUserSelection = false
      this.keyIndex ++
      //调用事件通知接口
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-msg',
        url: '/v1.0/plus/create/event/notice',
        data: {
          pojo: {
            targetType: 0,
            eventType: 2,
            bizType: 0,
            bizworkId: this.$store.getShop('shopId'),
            noticeText: `您好，【${this.$store.getShop('shopName')}】邀请您成为店铺员工`,
            openMode: 0,
            recvUid: user.userId
          }
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success('邀请成功，请等待对方同意')
            this.Init()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).post()
    },
    //获取列表
    Init(){
      new this.$rest({
        gateway: 'agroerp',
        service: 'agroerp-shop',
        url: '/v1.0/shop/employee/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.pageTotal = res.data.data.count
            this.dataGrid = res.data.data.list
            for(let item of this.dataGrid) {
              item.userName = item.userName ? item.userName : '匿名用户'
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
     },
     //搜索
    searchGet() {
      let sqlLike = {
        fields: ["user_name","union_mobile","id_card_no"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.Init()
    },
    //重置
    reset() {
      delete this.query.sqlLike
      this.keywords = null
      this.Init()
    },
    doDelete(e) {
      this.$Modal.confirm({
        title: '删除员工',
        content: `确定删除【${e.userName}】员工吗？`,
        onOk: () => {
          new this.$rest({
            gateway: 'agroerp',
            service: "agroerp-shop",
            url: "/v1.0/shop/employee",
            data: {
              pojo: [e.shopUserId]
            },
            action: (res) => {
              if (res.data.code === 20000) {
                this.$Message.success('删除成功')
                this.Init()
              } else {
                this.$Notice.warning({
                  desc: `失败原因：${res.data.msg}`,
                });
              }
            },
          }).delete()
        }
      })
    },
    onCancel() {
      this.keyIndex ++
    },
  },
  created(){
    this.Init()
  }
}
</script>
<style lang="less" scoped>

</style>